<!-- 来煤记录 -->
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { EditPen, Refresh } from '@element-plus/icons-vue'
import { ElMessage,ElLoading, ElMessageBox } from 'element-plus'
import type { TableColumnCtx, FormInstance } from 'element-plus'

import { RouterLink } from 'vue-router';

// table-list 搜索
const searchTime = ref('')

const coalListData = ref(['1#煤场', '2#煤场', '3#煤场'])
const coalIndex = ref(0)

function clickCoal(index: number) {
    coalIndex.value = index
}

const searchTimeIndex = ref(0)
function clickSearchTime(index: number) {
    searchTimeIndex.value = index
    searchTime.value = ''
}
function changeSearchTime() {
    searchTimeIndex.value = 3
}

//table设置
const tableHeight = ref(0)


// 定义表格数据的类型
interface TableRow {
  id: number;
  time: string;
  name: string;
  name1: string;
}

// 保存选中项的 ID 列表
const selectedRowIds = ref<Set<number>>(new Set());

// 处理选中项变化的函数
const handleSelectionChange = (selection: TableRow[]) => {
  // 更新选中项 ID 列表
  selectedRowIds.value = new Set(selection.map((item) => item.id));
};

// 自定义行类名的函数
const rowClassName = ({ row }: { row: TableRow }): string => {
  return selectedRowIds.value.has(row.id) ? 'selected-row' : '';
};
const rowInfoClassName = (id:number) => {
    return selectedRowIds.value.has(id) ? 'selected_bg' : '';
}

//table样式自定义
const headerCellStyle = {
    padding:'16px 0',
    background: '#CCDDF9',
    color: '#3D4755'
}


const tableDialogVisible = ref(false)
function clickTableDialog(){
    tableDialogVisible.value = false
    ElMessage({
        message: '已修改，数据已更新',
        type: 'success',
    })
    //ElMessage.error('修改失败，请重新提交')
}


const inputVal1 = ref('')
const inputVal2 = ref('')
const selectDay = ref('')

const selectOptions = [
    {
        value: '3',
        label: '近3天',
    },
    {
        value: '7',
        label: '近7天',
    },
    {
        value: '30',
        label: '近30天',
    }
]

// 修改
const editDialogVisible = ref(false)
//详情
const infoDialogVisible = ref(false)
//批次编号
const lotDialogVisible = ref(false)
//导入
const importVisible = ref(false)
const stepsIndex = ref(0)

const addDialogVisible = ref(false)
const addForm = ref<any>(
{
  "id": 0,
  "entryNo": "",
  "planId": null,
  "suplierId": 0,
  "berthingDock": "",
  "shipName": "",
  "shipNo": "",
  "planArriveTime": "",
  "planInTime": "",
  "deliveryMethod": "",
  "contractType": "",
  "contractHotValue": 0,
  "contractTime": "",
  "shipAgency": "",
  "entryQuality": "",
  "scq": 0,
  "beforeInventory": 0,
  "afterInventory": 0,
  "wgq": 0,
  "sjfxsj": "",
  "fgsj": "",
  "xgmdsj": "",
  "xgkbsj": "",
  "unloadingStartTime": "",
  "unloadingEndTime": "",
  "xglbsj": "",
  "xhsjxs": 0,
  "xhsjt": 0,
  "xghst": 0,
  "xghsxs": 0,
  "xiePercentD": 0,
  "xiePercentH": 0,
  "scyxxh": 0,
  "sbyxys": "",
  "sbzdsj": 0,
  "csywsj": 0,
  "qtzyys": "",
  "qtyxsj": 0,
  "zjyxsj": 0,
  "sjxmsj": 0,
  "kcts": 0,
  "kcyy": "",
  "xmxksjsh": 0,
  "xmxksjt": 0,
  "mdddsj": 0,
  "remark": "",
  "creater": 0,
  "updateTime": "",
  "planWeight": 0,
  "unloadingWeight": 0,
  "unloadingBunkerId": "",
  "createTime": "",
  "updater": 0,
  "bunkerAreaDatas": [
    
  ],
  "client": "",
  "samplingWay": "",
  "samplingDevice": "",
  "samplingTime": "",
  "samplingReceivedTime": "",
  "supervisor": "",
  "referredCodes": ""
})
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<any>({
    planId:[
        { required: true, message: '请选择', trigger: 'change' },
    ],
    contractType:[
        { required: true, message: '请选择', trigger: 'change' },
    ],
    suplierId:[
        { required: true, message: '请选择', trigger: 'change' },
    ],
    planInTime:[
        { required: true, message: '请选择', trigger: 'change' },
    ],
    unloadingStartTime:[
        { required: true, message: '请选择', trigger: 'change' },
    ],
    unloadingEndTime:[
        { required: true, message: '请选择', trigger: 'change' },
    ],
    entryNo:[
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    shipName:[
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    shipNo:[
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    wgq:[
        { required: true, message: '请输入', trigger: 'blur' },
    ],
})
const submitAddForm = async (formEl: FormInstance | undefined) => {
    if(!addForm.value.planId){
        ElMessage.error("请先选择来煤计划")
        return
    }
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            if(isEdit.value)
            {
                clickEditBunkerInRecord()
            }
            else{
                clickAddBunkerInRecord()
            }
            
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetAddForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    //planOpt.value = null
    addForm.value.bunkerAreaDatas = []
}

const planOpt = ref<any>(null)
// 来煤计划下拉框
const changePlan = (value: any) =>{
    console.log(value)

    const obj = ref<any>({})

    obj.value =  planData.value.find((item:any) => item.id === value);

    console.log(obj.value)
    
    //addForm.value.planId = e.id
    addForm.value.shipNo = obj.value.shipNo;
    addForm.value.shipName = obj.value.shipName;
    addForm.value.suplierId = obj.value.suplierId;
    addForm.value.contractType = obj.value.contractType;
    addForm.value.contractHotValue = obj.value.hotValue;
    //addForm.value.entryQuality = e.entryQuality;

    //addForm.value.planArriveTime = e.planArriveTime;
    addForm.value.planInTime = obj.value.planInTime;
    addForm.value.planOutTime = obj.value.planOutTime;

    addForm.value.planWeight = obj.value.actureWeight;

    addForm.value.beforeInventory = obj.value.beforeInventory;
    addForm.value.afterInventory = obj.value.afterInventory;
    
}


import { addBunkerInRecord, editBunkerInRecord, BunkerInRecordList, GetAllBunkerData, RecordPlanData, delBunkerInRecord, AllSupplierMsgList, AllFactoryCoalQuality, AreaByBunkerId,AllFuelTypeList } from '@/api'

//煤场
let bunkerData = ref<any>([])
function getGetAllBunkerData(){
    GetAllBunkerData().then(res=>{
        console.log('所属煤场----',res.data)
        bunkerData.value = res.data
    })
}
const AreaBunkerData = ref<any>([])
const getAreaByBunkerId = (id:any) => {
    AreaByBunkerId(id).then((res:any)=>{
        console.log('字典----区域',res.data)
        AreaBunkerData.value = res.data
        //addForm.value.bunkerAreaDatas = []
        for (const i in bunkerData.value) {
            if(id == bunkerData.value[i].bunkerId){
                bunkerName.value = bunkerData.value[i].bunkerName
            }
        }
        for (const i in res.data) {
            addForm.value.bunkerAreaDatas.push({
                "bunkerId": id,
                "bunkerName": bunkerName.value,
                "areaId": res.data[i].id,
                "areaName": res.data[i].areaName,
                "areaCode": res.data[i].areaCode,
                "minValue": res.data[i].minValue,
                "maxValue": res.data[i].maxValue,
                "firstCode": "",
                "secondCode": "",
                "bunkerTypeName": "",
                "coalTypeId": 0,
                "weight": 0
            })
        }
        console.log('bunkerAreaDatas',addForm.value.bunkerAreaDatas)
    })
}

const bunkerName = ref('')


const unloadingBunkerIds = ref<any>([])
const handleCheckedChange = (value: string[]) => {
    console.log(value)
    addForm.value.unloadingBunkerId = unloadingBunkerIds.value.join()
    addForm.value.bunkerAreaDatas = []
    for (const i in value) {
        getAreaByBunkerId(value[i])
    }
}

// 添加接卸明细
function clickAddXzInfo(item:any,index:any){
    console.log(index)
    addForm.value.bunkerAreaDatas.splice(index + 1, 0, {
        "bunkerId": item.bunkerId,
        "bunkerName": item.bunkerName,
        "areaId": item.id,
        "areaName": item.areaName,
        "areaCode": item.areaCode,
        "minValue": item.minValue,
        "maxValue": item.maxValue,
        "firstCode": "",
        "secondCode": "",
        "bunkerTypeName": "",
        "coalTypeId": 0,
        "weight": 0
    })
}


const infoListIndex = ref(0)
const changeFirstCode = (value: any) => {
    console.log('infoListIndex----',infoListIndex.value)
    for (const key in QualityData.value) {
        if (value == QualityData.value[key].firstCode) {
            console.log('firstCode----', QualityData.value[key].ftId)
            addForm.value.bunkerAreaDatas[infoListIndex.value].coalTypeId = QualityData.value[key].ftId
        }
    }
}

const visibleChange = (index: number) => {
    console.log(index)
    infoListIndex.value = index
}


function clickDeleteDatas(id:any,index:any,row:any){
    console.log(index)
    let count = 0;
    addForm.value.bunkerAreaDatas.forEach((item:any) => {
        if (item.areaName === row.areaName) {
            count++;
        }
    });
    if(count > 1){
        addForm.value.bunkerAreaDatas.splice(index, 1);
    }
    else{
        ElMessage.error('最少要有一个')
    }
}

// 供应商
const SupplieData = ref<any>([])
function getAllSupplierMsgList(){
    AllSupplierMsgList().then(res=>{
        console.log('供应商----',res.data)
        SupplieData.value = res.data
    })
}

const QualityData = ref<any>([])
function getAllFactoryCoalQualityList(){
    AllFactoryCoalQuality().then(res=>{
        console.log('入厂编号----',res.data)
        QualityData.value = res.data
    })
}

// 煤炭种类
const FuelTypeData = ref<any>([])
function getAllFuelTypeList(){
    AllFuelTypeList().then(res=>{
        console.log('煤炭种类----',res.data)
        FuelTypeData.value = res.data
    })
}

//来煤计划下拉框数据
let planData = ref<any>([])
function getRecordPlanData(){
    RecordPlanData().then(res=>{
        console.log('来煤计划下拉框数据----',res.data)
        planData.value = res.data
    })
}

// list
const listTableData = ref<any>([])
function getBunkerInRecordList(){
    BunkerInRecordList().then(res=>{
        console.log('list----',res.data)
        listTableData.value = res.data.result
    })
}

// 删除
const clickDelete = (ids:string) => {
    ElMessageBox.confirm(
        '是否确定删除，删除后不能恢复?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    )
    .then(() => {
        delBunkerInRecord(ids).then(res=>{
            console.log('删除----',res)
            if(res.code === 200){
                ElMessage({
                    type: 'success',
                    message: '已成功删除',
                })
                getBunkerInRecordList()
            }
            else{
                ElMessage.error('删除失败，请重新删除')
            }
        })
    })
}


// 自定义合计行
const getSummaries = (param: { columns: any[], data: any[] }) => {
    const { columns, data } = param;
    const sums: string[] = [];
    
    // 遍历每一列
    columns.forEach((column, index) => {
        if (index === 0) {
        sums[index] = '合计';  // 第一列显示 "Total"
        return;
        }

        // 只对 price 和 quantity 列进行合计
        if (['weight'].includes(column.property)) {
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => prev + curr, 0).toFixed(2); // 保留两位小数
        } else {
            sums[index] = 'N/A';
        }
        } else {
        sums[index] = ''; // 其他列不显示合计
        }
    });

    return sums;
};

interface SpanMethodProps {
  row: any
  column: TableColumnCtx<any>
  rowIndex: number
  columnIndex: number
}
const mergeCells = ({
    row,
    column,
    rowIndex,
    columnIndex,
    }: SpanMethodProps) => {
        if (column.property === 'bunkerName') {
            // 合并相同的 "name" 列
            let previousRow = addForm.value.bunkerAreaDatas[rowIndex - 1];
            if (previousRow && previousRow.bunkerName === row.bunkerName) {
                return [0, 0]; // 如果和上一行的 "name" 相同，则合并
            }
            let rowspan = 1;
            for (let i = rowIndex + 1; i < addForm.value.bunkerAreaDatas.length; i++) {
                if (addForm.value.bunkerAreaDatas[i].bunkerName === row.bunkerName) {
                    rowspan++;
                } else {
                    break;
                }
            }
            return [rowspan, 1];
        }
        if (column.property === 'areaName') {
            let previousRow = addForm.value.bunkerAreaDatas[rowIndex - 1];
            if (previousRow && previousRow.areaName === row.areaName) {
                return [0, 0]; // 如果和上一行的 "name" 相同，则合并
            }
            let rowspan = 1;
            for (let i = rowIndex + 1; i < addForm.value.bunkerAreaDatas.length; i++) {
                if (addForm.value.bunkerAreaDatas[i].areaName === row.areaName) {
                    rowspan++;
                } else {
                    break;
                }
            }
            return [rowspan, 1];
        }
}

const headerCellStyle1 = {
    padding:'10px 0',
    background: '#CCDDF9',
    color: '#3D4755'
}

// 添加
const clickAddBunkerInRecord = ()=>{
    console.log(addForm.value)
    addBunkerInRecord(addForm.value).then(res=>{
        console.log('新增----',res)
        if(res.code === 200){
            ElMessage({
                type: 'success',
                message: '添加成功',
            })
            addDialogVisible.value = false
            getBunkerInRecordList()
        }
        else{
            ElMessage.error(res.msg)
        }
    })
}

// 修改
const isEdit = ref(false)
const clickShowEdit = (item:any)=>{
    isEdit.value = true
    addDialogVisible.value = true
    addForm.value = item
    //planOpt.value.id = addForm.value.planId
}
const clickEditBunkerInRecord = ()=>{
    console.log(addForm.value)
    editBunkerInRecord(addForm.value).then(res=>{
        console.log('修改----',res)
        if(res.code === 200){
            ElMessage({
                type: 'success',
                message: '修改成功',
            })
            isEdit.value = true
            addDialogVisible.value = false
            getBunkerInRecordList()
        }
        else{
            ElMessage.error(res.msg)
        }
    })
}

// 批量删除
const batchDel = () => {
    if(selectedRowIds.value.size == 0){
        ElMessage.error('请先选择要批量删除的数据')
    }
    else{
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        let ids: string = Array.from(selectedRowIds.value).join(', ');
        delBunkerInRecord(ids).then(res=>{
            console.log('删除----',res)
            loading.close()
            if(res.code === 200){
                ElMessage({
                    type: 'success',
                    message: '已成功删除',
                })
                getBunkerInRecordList()
            }
            else{
                ElMessage.error('删除失败，请重新删除')
            }
        })
    }
}

onMounted(()=>{
    // 获取页面高度
    tableHeight.value = window.innerHeight - 310;
    getRecordPlanData()
    getGetAllBunkerData()
    getBunkerInRecordList()
    getAllSupplierMsgList()
    getAllFactoryCoalQualityList()
    getAllFuelTypeList()
})

</script>
<template>
    <!-- 弹出框/新增 -->
    <el-dialog v-model="addDialogVisible" :title="isEdit?'编辑来煤记录':'新增来煤记录'" width="1400" :align-center="true">
        <div class="dialog_main">
            <el-form ref="ruleFormRef" :rules="ruleForm" :inline="true" :model="addForm" class="mt15 form-inline-row-three" label-width="auto" label-position="right">
                <el-form-item label="来煤计划:" prop="planId">
                    <el-select v-model="addForm.planId" value-key="id" placeholder="请选择" :clearable="true" @change="changePlan">
                        <el-option v-for="item in planData" :label="item.shipName" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="航次:" prop="shipNo">
                    <el-input v-model="addForm.shipNo" placeholder="请输入" />
                    <img class="ico_add_btn" src="../../assets/img/ico_8.png" alt="">
                </el-form-item>
                <el-form-item label="合同性质:" prop="contractType">
                    <el-input v-model="addForm.contractType" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="合同基准热值:" prop="contractHotValue">
                    <el-input v-model="addForm.contractHotValue" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="船名:" prop="shipName">
                    <el-input v-model="addForm.shipName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="供应商名称:" prop="suplierId">
                    <!-- <el-input v-model="addForm.suplierId" placeholder="请输入" /> -->
                    <el-select v-model="addForm.suplierId" placeholder="请选择" :clearable="true" >
                        <el-option v-for="item in SupplieData" :label="item.supplierName" :value="item.id" />
                    </el-select>
                    
                </el-form-item>
                <el-form-item label="交货方式:" prop="deliveryMethod">
                    <el-input v-model="addForm.deliveryMethod" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="入厂编号:" prop="entryNo">
                    <el-input v-model="addForm.entryNo" placeholder="请输入" />
                </el-form-item>
                <!-- <el-form-item label="所属煤种:">
                    <el-select v-model="addForm.name" placeholder="请选择- 缺" >
                        <el-option label="" value="1" />
                        <el-option label="" value="2" />
                    </el-select>
                    <img class="ico_add_btn" src="../../assets/img/ico_add.png" alt="">
                </el-form-item> -->
                <el-form-item label="关联入厂质量验收:" prop="entryQuality">
                    <el-input v-model="addForm.entryQuality" placeholder="请输入" />
                </el-form-item>

                <div class="form_title">入厂信息</div>
                <el-form-item label="计划到厂时间:" prop="planArriveTime">
                    <el-date-picker
                        v-model="addForm.planArriveTime"
                        type="date"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择"
                    />
                </el-form-item>
                <el-form-item label="计划靠泊时间:" prop="planInTime">
                    <el-date-picker
                        v-model="addForm.planInTime"
                        type="date"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择"
                    />
                </el-form-item>
                <el-form-item label="计划离岸时间:" prop="name">
                    <el-date-picker
                        v-model="addForm.name"
                        type="date"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择"
                    />
                </el-form-item>
                <el-form-item label="发货量:" prop="planWeight">
                    <el-input v-model="addForm.planWeight" placeholder="请填写重量吨，小数点后两位" />
                </el-form-item>
                <el-form-item label="到厂前库存:" prop="beforeInventory">
                    <el-input v-model="addForm.beforeInventory" placeholder="" disabled />
                </el-form-item>
                <el-form-item label="加上船上库存:" prop="afterInventory">
                    <el-input v-model="addForm.afterInventory" placeholder="" disabled />
                </el-form-item>
                <el-form-item label="标煤量:" prop="scq">
                    <el-input v-model="addForm.scq" placeholder="请填写重量吨，小数点后两位" />
                </el-form-item>
                <el-form-item label="验收水尺数量:" prop="wgq">
                    <el-input v-model="addForm.wgq" placeholder="请填写重量吨，小数点后两位" />
                </el-form-item>

                <div class="form_title">接卸信息</div>
                <el-form-item label="放关时间:" prop="fgsj">
                    <el-date-picker
                        v-model="addForm.fgsj"
                        type="date"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择"
                    />
                </el-form-item>
                <el-form-item label="卸货时间:" prop="xhsjxs">
                    <el-input v-model="addForm.xhsjxs" placeholder="" disabled />
                </el-form-item>
                <el-form-item label="卸港耗时:" prop="xghsxs">
                    <el-input v-model="addForm.xghsxs" class="input_red" placeholder="" disabled />
                </el-form-item>
                <el-form-item label="卸港锚地时间:" prop="xgmdsj">
                    <el-date-picker
                        v-model="addForm.xgmdsj"
                        type="date"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择"
                    />
                </el-form-item>
                <el-form-item label="卸率:" prop="xiePercentH">
                    <el-input v-model="addForm.xiePercentH" class="input_red" placeholder="" disabled />
                </el-form-item>
                <el-form-item label="厂内卸煤许可时间:" prop="xmxksjsh">
                    <el-input v-model="addForm.xmxksjsh" class="input_red" placeholder="" disabled />
                </el-form-item>
                <el-form-item label="卸港靠泊时间:" prop="xgkbsj">
                    <el-date-picker
                        v-model="addForm.xgkbsj"
                        type="date"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择"
                    />
                </el-form-item>
                <el-form-item label="卸港离泊时间:" prop="xglbsj">
                    <el-input v-model="addForm.xglbsj" class="input_red" placeholder="" disabled />
                </el-form-item>
                <el-form-item label="锚地等待时间(天):" prop="mdddsj">
                    <el-input v-model="addForm.mdddsj" class="input_red" placeholder="" disabled />
                </el-form-item>

                <el-form-item label="卸煤位置:" prop="unloadingBunkerId" style="width: 100%;">
                    <el-checkbox-group v-model="unloadingBunkerIds" @change="handleCheckedChange">
                        <el-checkbox v-for="item in bunkerData" :label="item.bunkerName" :value="item.bunkerId" />
                    </el-checkbox-group>
                    <!-- <el-radio-group v-model="addForm.unloadingBunkerId" @change="changeRadioBunkerId()">
                        <el-radio v-for="item in bunkerData" :label="item.bunkerName" :value="item.bunkerId">{{item.bunkerName}}</el-radio>
                    </el-radio-group> -->
                </el-form-item>
                <!-- <el-form-item v-if="addForm.unloadingBunkerId" label="计划接卸范围-缺:" style="width: 100%;">
                    <el-checkbox-group v-model="addForm.checkbox2">
                        <el-checkbox label="A区" value="A" />
                        <el-checkbox label="B区" value="B" />
                        <el-checkbox label="C区" value="C" />
                    </el-checkbox-group>
                </el-form-item> -->

                <el-form-item label="卸煤开始时间:" prop="unloadingStartTime">
                    <el-date-picker
                        v-model="addForm.unloadingStartTime"
                        type="date"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择"
                    />
                </el-form-item>
                <el-form-item label="卸煤结束时间:" prop="unloadingEndTime">
                    <el-date-picker
                        v-model="addForm.unloadingEndTime"
                        type="date"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择"
                    />
                </el-form-item>
                <el-form-item label="影响卸煤时间:" prop="zjyxsj">
                    <el-input v-model="addForm.zjyxsj" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="影响卸煤原因:" prop="qtzyys" style="width: 100%;">
                    <el-input
                        v-model="addForm.qtzyys"
                        style="width: 94.5%"
                        :autosize="{ minRows: 3, maxRows: 5 }"
                        type="textarea"
                        placeholder=""
                    />
                </el-form-item>

                <div class="form_title">计划接卸明细</div>
                <el-table
                    class="table_xiezai"
                    :data="addForm.bunkerAreaDatas"
                    style="width: 100%;"
                    border
                    show-summary
                    :summary-method="getSummaries"
                    :span-method="mergeCells"
                    :highlight-current-row="false"
                    :header-cell-style="headerCellStyle1"
                    >
                    <el-table-column prop="bunkerName" label="接卸煤场"></el-table-column>
                    <el-table-column prop="areaName" label="接卸区域" ></el-table-column>
                    <el-table-column prop="firstCode" label="批次号/入厂编号" >
                        <template #default="props">
                            <el-select v-model="props.row.firstCode" placeholder="请选择" style="width: 100%;" @visible-change="visibleChange(props.$index)" @change="changeFirstCode">
                                <el-option v-for="(itemq,indexq) in QualityData" :key="indexq" :label="itemq.firstCode" :value="itemq.firstCode" />
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="coalTypeId" label="所属煤种" >
                        <template #default="props">
                            <el-select v-model="props.row.coalTypeId" placeholder="请选择" style="width: 100%;">
                                <el-option v-for="(itemt,indext) in FuelTypeData" :key="indext" :label="itemt.ftName" :value="itemt.ftId" />
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="weight" label="重量" >
                        <template #default="props">
                            <el-input type="number" v-model="props.row.weight" placeholder="请输入"  style="width: 100%;" />
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="100">
                        <template #default="scope">
                            <div class="table_btn">
                                <a href="javascript:;" @click='clickDeleteDatas(scope.row.id, scope.$index,scope.row)'><img class="pointer" src="../../assets/img/ico_del.png" alt=""></a>
                                <a  href="javascript:;" @click="clickAddXzInfo(scope.row, scope.$index)"><img src="../../assets/img/ico_add.png" alt=""></a>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <!--                 
                <div class="table_info small">
                    <table>
                        <colgroup>
                            <col width="10%">
                            <col width="20%">
                            <col width="16%">
                            <col width="16%">
                            <col width="16%">
                            <col width="8%">
                        </colgroup>
                        <tr>
                            <th>接卸煤场</th>
                            <th>接卸区域</th>
                            <th>批次号/入厂编号</th>
                            <th>所属煤种</th>
                            <th>重量</th>
                            <th>操作</th>
                        </tr>
                        <tr v-for="(item,index) in addForm.bunkerAreaDatas" :key="index">
                            <td>
                                <span v-for="item in bunkerData">
                                    <span v-if="addForm.unloadingBunkerId == item.bunkerId">{{ item.bunkerName }}</span>
                                </span>
                            </td>
                            <td >
                                <div class="table_area">
                                    {{ item.areaName }}
                                    <img class="table_add_btn" src="../../assets/img/ico_add.png" alt="">
                                </div>
                            </td>
                            <td>
                                <el-select v-model="item.firstCode" placeholder="请选择">
                                    <el-option v-for="(itemq,indexq) in QualityData" :key="indexq" :label="itemq.firstCode" :value="itemq.firstCode" />
                                </el-select>
                            </td>
                            <td>
                                <el-select v-model="item.coalTypeId" placeholder="请选择">
                                    <el-option v-for="(itemt,indext) in FuelTypeData" :key="indext" :label="itemt.ftName" :value="itemt.ftId" />
                                </el-select>
                            </td>
                            <td><el-input v-model="addForm.weight" placeholder="请输入" /></td>
                            <td>
                                <img class="pointer" src="../../assets/img/ico_del.png" alt="">
                            </td>
                        </tr>
                        
                        <tr class="table_bg">
                            <td colspan="4">合计</td>
                            <td >13890</td>
                            <td ></td>
                        </tr>
                    </table>
                </div> -->

            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;" @click="submitAddForm(ruleFormRef)">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 弹出框/导入 -->
    <el-dialog v-model="importVisible" title="导入来煤记录" width="700" :align-center="true" >
        <div class="bor_top"></div>
        <div class="import_dialog">
            <ul class="steps_title">
                <li :class="stepsIndex == 0?'hover':''">第一步</li>
                <li class="ico_r">
                    <img v-if="stepsIndex == 0" src="../../assets/img/ico_r2.png" width="30" height="52" alt="" />
                    <img v-if="stepsIndex == 1" src="../../assets/img/ico_r3.png" width="30" height="52" alt="" />
                    <img v-if="stepsIndex == 2" src="../../assets/img/ico_r1.png" width="30" height="52" alt="" />
                    <img v-if="stepsIndex == 3" src="../../assets/img/ico_r1.png" width="30" height="52" alt="" />
                </li>
                <li :class="stepsIndex == 1?'hover':''">第二步</li>
                <li class="ico_r">
                    <img v-if="stepsIndex == 0" src="../../assets/img/ico_r1.png" width="30" height="52" alt="" />
                    <img v-if="stepsIndex == 1" src="../../assets/img/ico_r2.png" width="30" height="52" alt="" />
                    <img v-if="stepsIndex == 2" src="../../assets/img/ico_r3.png" width="30" height="52" alt="" />
                    <img v-if="stepsIndex == 3" src="../../assets/img/ico_r3.png" width="30" height="52" alt="" />
                </li>
                <li :class="stepsIndex == 2||stepsIndex == 3?'hover':''">第三步</li>
            </ul>
            <div class="steps_down" v-if="stepsIndex == 0">
                <p>1、下载“来煤记录”模板表，请点击文件</p>
                <div class="down_file">
                    <img src="../../assets/img/ico_10.png" alt="">
                </div>
                <p>来煤记录”模板表</p>
                <a href="javascript:;" class="btn_down"><el-icon><Download /></el-icon>点击下载</a>
            </div>
            <div class="steps_text" v-if="stepsIndex == 1">
                1、用电脑打开“来煤记录模板表”的文件<br>
                2、参考填写要求，填写“来煤记录<br>
                3、填写完成，保存。
            </div>
            <div class="steps_down" v-if="stepsIndex == 2">
                <p>点击“上传”按钮，选中第二步填写好的“来煤记录表</p>
                <div class="down_file">
                    <img src="../../assets/img/ico_11.png" alt="">
                </div>
                <p>上传填写好的“来煤记录表”</p>
                <a href="javascript:;" class="btn_down" @click="ElMessage.error('导入失败：数据上传中断')"><el-icon><Upload /></el-icon>点击上传</a>
            </div>
            <div class="steps_win" v-if="stepsIndex == 3">
                <img src="../../assets/img/ico_12.png" alt="">
                <p class="green">上传成功</p>
            </div>
            <div class="dialog-footer-center" v-if="stepsIndex == 0">
                <el-button type="primary" @click="stepsIndex = 1" color="#2565C8" style="width: 200px;height: 40px;">
                    下一步
                </el-button>
            </div>
            <div class="dialog-footer-center" v-if="stepsIndex == 1">
                <el-button type="primary" plain @click="stepsIndex = 0" color="#2565C8" style="width: 200px;height: 40px;">
                    上一步
                </el-button>
                <el-button type="primary" @click="stepsIndex = 2" color="#2565C8" style="width: 200px;height: 40px;">
                    下一步
                </el-button>
            </div>
            <div class="dialog-footer-center" v-if="stepsIndex == 2">
                <el-button type="primary" plain @click="stepsIndex = 3" color="#2565C8" style="width: 200px;height: 40px;">
                    上一步
                </el-button>
            </div>
        </div>
    </el-dialog>

    <!-- 弹出框/-查看批次编号-来煤煤质详情 -->
    <el-dialog v-model="lotDialogVisible" title="来煤煤质详情" width="900" :align-center="true">
        <div class="dialog_main">
            <ul class="edit_info mt15">
                <li>
                    <span>样品名称:</span>
                    <p>华为</p>
                </li>
                <li>
                    <span>来煤批次号:</span>
                    <p>12345687</p>
                </li>
                <li>
                    <span>代表煤种:</span>
                    <p>褐煤</p>
                </li>
                <li>
                    <span>代表煤量:</span>
                    <p>17013(吨)</p>
                </li>
                <li>
                    <span>一次编码:</span>
                    <p>1235</p>
                </li>
                <li>
                    <span>关联二次编码:</span>
                    <p>********</p>
                </li>
                <li>
                    <span>化验日期:</span>
                    <p>2023-06-09</p>
                </li>
            </ul>
            <div class="form_title">相关煤质检测数据</div>
            <div class="table_info small">
                <table>
                    <colgroup>
                        <col width="14%">
                        <col width="15%">
                        <col width="15%">
                        <col width="15%">
                        <col width="15%">
                        <col width="12%">
                        <col width="12%">
                    </colgroup>
                    <tr>
                        <th>项目</th>
                        <th>收到基ar</th>
                        <th>空气干燥基ad</th>
                        <th>干基d</th>
                        <th>干燥无灰基daf</th>
                        <th>符号</th>
                        <th>单位</th>
                    </tr>
                    <tr>
                        <th>全水分</th>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>空干基水分</th>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>灰分</th>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>挥发分</th>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>固定碳</th>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>高位发热量</th>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>低位发热量</th>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>全硫</th>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>元素分析</th>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                </table>
            </div>

            <!-- 上传检测报告 -->
            <div class="upload_report">
                <div class="name">相关煤质检测报告</div>
                <p>
                    <img src="../../assets/img/3.jpg" width="130" alt="">
                    <RouterLink class="blue" to="/entranceReport">预览检测报告</RouterLink>
                    <a href="#" class="blue">下载检测报告</a>
                </p>
            </div>
        </div>
    </el-dialog>

    <!-- 弹出框/详情 -->
    <el-dialog v-model="infoDialogVisible" title="查看来煤记录" width="1400" :align-center="true">
        <div class="dialog_main">
            <ul class="edit_info2 mt15">
                <li>
                    <span>航次:</span>
                    <p>112</p>
                </li>
                <li>
                    <span>合同性质:</span>
                    <p>112</p>
                </li>
                <li>
                    <span>合同基准热值:</span>
                    <p>112</p>
                </li>
                <li>
                    <span>船名:</span>
                    <p>天成</p>
                </li>
                <li>
                    <span>供应商名称:</span>
                    <p>华南</p>
                </li>
                <li>
                    <span>交货方式:</span>
                    <p>2222</p>
                </li>
                <li>
                    <span>入厂编号:</span>
                    <p>1211(褐煤); 1311(大友)</p>
                </li>
                <li>
                    <span>入厂质量验收:</span>
                    <p>褐煤</p>
                </li>
            </ul>
            <div class="form_title">入厂信息</div>
            <div class="table_info small">
                <table>
                    <tr>
                        <th>计划到厂时间</th>
                        <th>计划靠泊时间</th>
                        <th>计划离岸时间</th>
                        <th>发货量</th>
                        <th>标煤量</th>
                        <th>验收水尺数</th>
                        <th>到厂前库存</th>
                        <th>加上船上库存</th>
                    </tr>
                    <tr>
                        <td>2023-07-07  10:23:09</td>
                        <td>2023-07-07  10:23:09</td>
                        <td>2023-07-07  10:23:09</td>
                        <td>13890吨</td>
                        <td>13890吨</td>
                        <td>138吨</td>
                        <td>13890吨</td>
                        <td>98020</td>
                    </tr>
                </table>
            </div>
            
            <div class="form_title mt15">接卸信息</div>
            <div class="table_info small">
                <table>
                    <colgroup>
                        <col width="25%">
                        <col width="25%">
                        <col width="25%">
                        <col width="25%">
                    </colgroup>
                    <tr>
                        <th>放关时间</th>
                        <td>2023-07-07</td>
                        <th>卸货时间</th>
                        <td>*****小时 /  ****天</td>
                    </tr>
                    <tr>
                        <th>卸港锚地时间</th>
                        <td>2023-07-07</td>
                        <th>卸港耗时</th>
                        <td>*****小时 /  ****天</td>
                    </tr>
                    <tr>
                        <th>卸港靠泊时间</th>
                        <td>2023-07-07</td>
                        <th>卸率</th>
                        <td>*****吨/小时 /  ****吨/天</td>
                    </tr>
                    <tr>
                        <th>卸港离泊时间</th>
                        <td>2023-07-07</td>
                        <th>厂内卸煤许可时间</th>
                        <td>******小时/*****天（自动计算）</td>
                    </tr>
                    <tr>
                        <th>卸煤位置</th>
                        <td>1#煤堆</td>
                        <th>锚地等待时间(天)</th>
                        <td>*****天（自动计算）</td>
                    </tr>
                    <tr>
                        <th>计划接卸范围</th>
                        <td>A区,B区</td>
                        <th>影响卸煤时间</th>
                        <td>****小时</td>
                    </tr>
                    <tr>
                        <th>卸煤开始时间</th>
                        <td>2023-07-07</td>
                        <th rowspan="2">影响卸煤原因</th>
                        <td rowspan="2">************</td>
                    </tr>
                    <tr>
                        <th>卸煤结束时间</th>
                        <td>2023-07-07</td>
                    </tr>
                </table>
            </div>

            <div class="form_title mt15">计划接卸明细</div>
            <div class="table_info small">
                <table>
                    <colgroup>
                        <col width="20%">
                        <col width="20%">
                        <col width="20%">
                        <col width="20%">
                        <col width="20%">
                    </colgroup>
                    <tr>
                        <th>接卸煤场</th>
                        <th>接卸区域</th>
                        <th>批次号/入厂编号</th>
                        <th>所属煤种</th>
                        <th>重量</th>
                    </tr>
                    <tr>
                        <td rowspan="5">1#煤场</td>
                        <td rowspan="3">0°-60°</td>
                        <td><a href="#" class="links" @click="lotDialogVisible = true">HM-20230707</a></td>
                        <td>褐煤</td>
                        <td>2930</td>
                    </tr>
                    <tr>
                        <td><a href="#" class="links" @click="lotDialogVisible = true">HM-20230707</a></td>
                        <td>褐煤</td>
                        <td>2930</td>
                    </tr>
                    <tr>
                        <td><a href="#" class="links" @click="lotDialogVisible = true">HM-20230707</a></td>
                        <td>褐煤</td>
                        <td>2930</td>
                    </tr>
                    <tr>
                        <td rowspan="2">60°-120°</td>
                        <td><a href="#" class="links" @click="lotDialogVisible = true">HM-20230707</a></td>
                        <td>褐煤</td>
                        <td>2930</td>
                    </tr>
                    <tr>
                        <td><a href="#" class="links" @click="lotDialogVisible = true">HM-20230707</a></td>
                        <td>褐煤</td>
                        <td>2930</td>
                    </tr>
                    <tr>
                        <td>1#煤场</td>
                        <td>120°-180°</td>
                        <td><a href="#" class="links" @click="lotDialogVisible = true">HM-20230707</a></td>
                        <td>褐煤</td>
                        <td>2930</td>
                    </tr>
                    <tr class="table_bg">
                        <td colspan="4">合计</td>
                        <td>13890</td>
                    </tr>
                </table>
            </div>

            <div class="form_title mt15">日志</div>
            <ul class="log_list">
                <li>
                    <p>1、王小丫在2023–07-02 12:12:11新增了来煤明细：新增内容为*****************</p>
                    <el-icon class="ico" size="16" color="#E04940"><CircleCloseFilled /></el-icon>
                </li>
                <li>
                    <p>2、刘霞在在2023-07-07 12:12:11修改了入厂时间：从2023-07-06修改成2023-07-07</p>
                    <el-icon class="ico" size="16" color="#E04940"><CircleCloseFilled /></el-icon>
                </li>
            </ul>

        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;" >
                    下载
                </el-button>
                <el-button type="primary" color="#2565C8" style="width: 130px;" >
                    打印
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 弹出框 -->
    <el-dialog v-model="tableDialogVisible" width="400" :align-center="true" center>
        <div class="table_dialog">
            <img src="../../assets/img/ico_5.png" alt="">
            <strong>您确定要保存修改内容吗？</strong>
            <span>
                修改内容保存后不可撤回，且会覆盖之前数据
            </span>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="tableDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="clickTableDialog">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

    <div class="record_search">
        <div class="name">所属煤场:</div>
        <ul class="record_search_tab">
            <li :class="coalIndex == index ? 'hover' : ''" v-for="(item, index) in bunkerData" @click="clickCoal(index)">{{ item.bunkerName }}</li>
        </ul>
        <div class="record_search_time">
            <div class="name">航次:</div>
            <div class="item">
                <el-input v-model="inputVal1" style="width: 140px" placeholder="请输入" />
            </div>
            <div class="name">供应商:</div>
            <div class="item">
                <el-input v-model="inputVal2" style="width: 140px" placeholder="请输入" />
            </div>
            <div class="name">入厂时间:</div>
            <div class="item">
                <el-date-picker v-model="searchTime" type="date" placeholder="请选择" @change="changeSearchTime" style="width: 160px" />
            </div>
            <div class="item">
                <el-select
                    v-model="selectDay"
                    placeholder="请选择"
                    style="width: 90px"
                    >
                    <el-option
                        v-for="item in selectOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
            <div class="item">
                <el-button type="primary" color="#2565C8">搜索</el-button>
            </div>
            <div class="item">
                <el-button style="padding:0 8px;">
                    <el-icon size="20">
                        <Refresh />
                    </el-icon>
                </el-button>
            </div>

        </div>
    </div>

    <div class="box_bg mt15">
        <div class="record_set">
            <el-button type="primary" color="#2565C8" >导出</el-button>
            <el-button type="primary" color="#2565C8" @click="addDialogVisible = true,resetAddForm(ruleFormRef)">新增</el-button>
            <el-button type="primary" color="#2565C8" @click="importVisible = true">批量导入</el-button>
            <el-button type="primary" color="#2565C8" @click="batchDel">批量删除</el-button>
        </div>
        <div class="table_list mt15">
            <el-table class="el_table_list" 
                :data="listTableData" 
                size="large" 
                :border="false" 
                :stripe="false" 
                :highlight-current-row="false"
                :height="tableHeight"
                :header-cell-style="headerCellStyle"
                style="width: 100%;" 
                :row-class-name="rowClassName"
                ref="multipleTableRef"
                @selection-change="handleSelectionChange">
                
                <el-table-column type="selection" width="50" align="right" />
                <el-table-column type="expand">
                    <template #default="props">
                        <div class="table_list_info" :class="rowInfoClassName(props.row.id)">
                            <div class="table_info">
                                <table>
                                    <tr>
                                        <th>入厂标煤量</th>
                                        <th>入厂验收水迟数量</th>
                                        <th>计划卸煤位置范围</th>
                                        <th>卸煤耗时</th>
                                        <th>卸港耗时</th>
                                    </tr>
                                    <tr>
                                        <td>{{ props.row.scq }}</td>
                                        <td>{{ props.row.wgq }}</td>
                                        <td></td>
                                        <td>{{ props.row.xhsjxs }}</td>
                                        <td>{{ props.row.xghsxs }}</td>
                                    </tr>
                                </table>
                            </div>
                            <!-- <div class="info_table">
                                <el-table :data="props.row.info" :border="true" :header-cell-style="headerRowStyle" style="width: 100%">
                                    <el-table-column align="center" label="与前次盘煤相比" prop="name">
                                        <el-table-column align="center" label="堆煤" prop="infoName1" />
                                        <el-table-column align="center" label="取煤" prop="infoName2" />
                                        <el-table-column align="center" label="变化值" prop="infoName3" />
                                    </el-table-column>
                                    <el-table-column align="center" label="盘存文件" prop="infoName4" />
                                </el-table>
                            </div> -->
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="入厂编号" prop="entryNo" />
                <el-table-column label="供应商" prop="suplierId" />
                <el-table-column label="计划属性" prop="planId" />
                <el-table-column label="卸货港" prop="berthingDock" />
                <el-table-column label="航次" prop="shipNo" />
                <el-table-column label="船名" prop="shipName" />
                <el-table-column label="交货方式" prop="deliveryMethod" />
                <el-table-column label="入厂发货量" prop="planWeight" />
                <el-table-column label="卸船位置" prop="name8" />
                <el-table-column align="center" label="操作" min-width="180">
                    <template #default="scope">
                        <div class="table_btn">
                            <a href="javascript:;" @click='clickDelete(scope.row.id)'>删除</a>|
                            <a href="javascript:;" @click="clickShowEdit(scope.row)">修改</a>|
                            <a href="javascript:;" @click="infoDialogVisible = true">详情</a>
                        </div>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <div class="pagination">
            <el-pagination background layout="prev, pager, next" :total="1000" />
        </div>

    </div>
</template>
<style scoped lang="scss">
.el-table{
    --el-table-row-hover-bg-color:#fff
}
.table_area{
    width: 100%;
    position: relative;
    .table_add_btn{
        position: absolute;
        right: 5px;
        top:50%;
        margin-top: -9px;
        cursor: pointer;
    }
}
.pointer{
    cursor: pointer;
}
.import_dialog{
    border:1px solid #eee;
    margin-top: 15px;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient( 48deg, #FCFDFF 0%, #EFF7FD 100%);
    padding-bottom: 20px;
    .steps_win{
        text-align: center;
        height: 350px;
        box-sizing: border-box;
        padding-top: 90px;
        p{
            font-weight: 500;
            font-size: 18px;
            line-height: 30px;
            padding-top: 10px;
        }
    }
    .steps_text{
        height: 350px;
        font-weight: 500;
        font-size: 18px;
        color: #3B4552;
        line-height: 40px;
        box-sizing: border-box;
        padding-top: 70px;
        padding-left: 170px;
    }
    .steps_down{
        width: 100%;
        height: 350px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;
        padding:40px 20px;
        .btn_down{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 114px;
            height: 32px;
            line-height: 20px;
            background: #EBF3FF;
            border-radius: 16px 16px 16px 16px;
            border: 1px solid #2565C8;
            font-size: 14px;
            color: #2565C8;
            transition: all 0.2s;
            &:hover{
                background: #C8DFFD;
            }
        }
        p{
            font-weight: 500;
            font-size: 16px;
            color: #3B4552;
            line-height: 32px;
        }
        .down_file{
            width: 110px;
            height: 110px;
            background: #E6EAF0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
                width: 48px;
            }
        }
    }
    .steps_title{
        display: flex;
        align-items: center;
        justify-content: space-between;
        li{
            width: 100%;
            color:#fff;
            text-align: center;
            line-height: 52px;
            background: #C8DFFD;
            font-size: 18px;
            &.hover{
                background: #2565C8;
            }
            &.ico_r{
                flex-shrink: 0;
                width: 30px;
                height: 52px;
                img{
                    display: block;
                    width: 30px;
                    height: 52px;
                }
            }
        }
    }
}

::v-deep(.el_table_list .el-table__body-wrapper){
    background: #F6FAFE !important;
}
::v-deep(.el_table_list .el-table__inner-wrapper:before){
    display: none; //下边线
}
::v-deep(.el_table_list .el-table thead th) {
  color: #333 !important;
  background: #CCDDF9;
}
::v-deep(.el_table_list .el-table__body){
    border-spacing: 0px 13px !important;
}
::v-deep(.el_table_list .el-table__row td){
    border-top:1px solid #E0E5ED !important;
    border-bottom:1px solid #E0E5ED !important;
}
::v-deep(.el_table_list .el-table__row td:first-child){
    border-left:1px solid #E0E5ED !important;
}
::v-deep(.el_table_list .el-table__row td:last-child){
    border-right:1px solid #E0E5ED !important;
}
::v-deep(.el_table_list .el-table__row:hover td){
    background: #ecf5ff!important;
}
::v-deep(.el_table_list .el-table__expanded-cell){
    border:1px solid #E0E5ED !important;
    padding:0 !important;
    //border-top: none !important; 
}
// ::v-deep(.el-table__expanded-cell td){
//     background: #ecf5ff!important;
// }
::v-deep(.el_table_list .el-table__expanded-cell:hover) {
  background-color: #ecf5ff !important;
}
::v-deep(.el_table_list .el-table__row.selected-row td){
    background: #FFDE9A !important;
}
</style>